<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="decorator :: common_header(~{::'title/text()'},~{::customHead})">
    <meta charset="UTF-8">
    <title>绑定手机</title>

    <!--/*/ <th:block th:fragment="customHead" > /*/-->
    <!-- jQuery 2.2.3 -->
    <link href="lib/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="lib/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="lib/css/custom/dlstyle.css" rel="stylesheet" type="text/css">
    <link href="lib/css/custom/personal.css" rel="stylesheet" type="text/css">
    <link href="lib/css/custom/stepstyle.css" rel="stylesheet" type="text/css">
    <!--/*/ </th:block > /*/-->

</head>
<body th:replace="decorator :: common_body(~{::mainBody},~{::tailScript})">
<!--导航-->
<!--/*/ <th:block th:fragment="mainBody" >  /*/-->

<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="am-cf am-padding">
                <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">绑定手机</strong> /
                    <small>Bind&nbsp;Phone</small>
                </div>
            </div>
            <hr/>
            <!--进度条-->
            <div class="m-progress">
                <div class="m-progress-list">
							<span class="step-1 step">
                                <em class="u-progress-stage-bg"></em>
                                <i class="u-stage-icon-inner">1<em class="bg"></em></i>
                                <p class="stage-name">绑定手机</p>
                            </span>
                    <span class="step-2 step">
                                <em class="u-progress-stage-bg"></em>
                                <i class="u-stage-icon-inner">2<em class="bg"></em></i>
                                <p class="stage-name">完成</p>
                            </span>
                    <span class="u-progress-placeholder"></span>
                </div>
                <div class="u-progress-bar total-steps-2">
                    <div class="u-progress-bar-inner"></div>
                </div>
            </div>
            <form class="am-form am-form-horizontal">
                <div class="am-form-group bind">
                    <label for="user-phone" class="am-form-label">验证手机</label>
                    <div class="am-form-content">
                        <span id="user-phone">187XXXX4286</span>
                    </div>
                </div>
                <div class="am-form-group code">
                    <label for="user-code" class="am-form-label">验证码</label>
                    <div class="am-form-content">
                        <input type="tel" id="user-code" placeholder="短信验证码">
                    </div>
                    <a class="btn" href="javascript:void(0);" onclick="sendMobileCode();" id="sendMobileCode">
                        <div class="am-btn am-btn-danger">验证码</div>
                    </a>
                </div>
                <div class="am-form-group">
                    <label for="user-new-phone" class="am-form-label">验证手机</label>
                    <div class="am-form-content">
                        <input type="tel" id="user-new-phone" placeholder="绑定新手机号">
                    </div>
                </div>
                <div class="am-form-group code">
                    <label for="user-new-code" class="am-form-label">验证码</label>
                    <div class="am-form-content">
                        <input type="tel" id="user-new-code" placeholder="短信验证码">
                    </div>
                    <a class="btn" href="javascript:void(0);" onclick="sendMobileCode();" id="sendMobileCode">
                        <div class="am-btn am-btn-danger">验证码</div>
                    </a>
                </div>
                <div class="info-btn">
                    <div class="am-btn am-btn-danger">保存修改</div>
                </div>

            </form>

        </div>
        <!--底部-->
        <div style="margin-top: 200px"></div>
    </div>

    <aside class="menu" style="margin-left:auto;margin-top: 10px;">
        <ul style="margin-top: -10px;margin-left: -10px;">
            <li class="person active">
                <a href="user/index">个人中心</a>
            </li>
            <li class="person">
                <a href="javascript:void(0)">个人资料</a>
                <ul>
                    <li><a href="user/information">个人信息</a></li>
                    <li><a href="user/safety">安全设置</a></li>
                    <li><a href="user/address">收货地址</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="javascript:void (0)">我的交易</a>
                <ul>
                    <li><a href="user/order">订单管理</a></li>
                    <li><a href="user/change">退款售后</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="javascript:void(0)">我的资产</a>
                <ul>
                    <li><a href="user/coupon">优惠券 </a></li>
                    <li><a href="user/bonus">红包</a></li>
                    <li><a href="user/bill">账单明细</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="javascript:void(0)">我的小窝</a>
                <ul>
                    <li><a href="user/collection">收藏</a></li>
                    <li><a href="user/foot">足迹</a></li>
                    <li><a href="user/comment">评价</a></li>
                    <li><a href="user/news">消息</a></li>
                </ul>
            </li>
        </ul>

    </aside>
</div>

<!--/*/ </th:block>  /*/-->

<!-- 原型注释  -->
<!--/*/ <th:block th:fragment="tailScript" > /*/-->
<script src="lib/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
<!--/*/ </th:block>  /*/-->
</body>
</html>
